var ProcedureForm = function () {
  var template = /* html */ `
    <div class="procedure-form" v-loading.fullscreen.lock="loading">
      <template v-if="workshopProcessList!==null">
        <div class="procedure-form-search">
          <el-input size="small" v-model="searchValue" placeholder="查询条件" @keyup.native.enter="toFilterTree">
            <el-button slot="append" icon="el-icon-search" @click="toFilterTree"></el-button>
          </el-input>
        </div>
        <div class="procedure-form-tree">
          <el-tree show-checkbox :data="workshopProcessList" empty-text="暂无可选择的工序" :props="procedureProps" node-key="id"
            :filter-node-method="filterNode" ref="procedureTree"></el-tree>
        </div>
        <div class="procedure-form-btns">
          <el-button type="primary" size="small" @click="ensure">确定</el-button>
        </div>
      </template>
    </div>
  `;

  return {
    props: {
      procedure: {
        type: Object,
        required: true
      }
    },

    data: function () {
      return {
        loading: false,
        workshopProcessList: null,
        searchValue: '',
        procedureProps: {
          label: 'name',
          children: 'processList'
        }
      };
    },

    created: function () {
      this.setWorkshopProcessList();
    },

    methods: {
      setWorkshopProcessList: function () {
        this.loading = true;
        var self = this;
        var procedure = this.procedure;
        ajaxRequest('orderProcedureTemplate/getAllWorkShopAndProcedure', {
          type: 1,
          userId: procedure.id
        }).then(function (workshopProcessList) {
          workshopProcessList = self.getProcessTreeData(workshopProcessList);

          self.workshopProcessList = workshopProcessList;
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      getProcessTreeData: function (workshopProcessList) {
        var workshopProcesses = [];
        for (var i = 0; i < workshopProcessList.length; i++) {
          var workshopProcess = workshopProcessList[i];
          var workshopName = workshopProcess.workshopName;
          if (workshopName === '车房开发') {
            continue;
          }

          var workshopId = workshopProcess.id;
          var processList = workshopProcess.processList;
          processList = _.map(processList, function (processObj) {
            return {
              id: processObj.id,
              name: processObj.processName,
              workshopId: workshopId
            };
          });

          workshopProcesses.push({
            id: `workshop_${workshopId}`,
            name: workshopName,
            processList: processList
          });
        }
        return workshopProcesses;
      },

      filterNode: function (value, data) {
        var processList = data.processList;
        if (processList !== undefined) {
          return false;
        }

        if (value === '') {
          return true;
        }

        var name = data.name;
        return name.indexOf(value) !== -1;
      },

      toFilterTree: function () {
        var searchValue = this.searchValue;
        this.$refs['procedureTree'].filter(searchValue);
      },

      ensure: function () {
        var processList = this.$refs['procedureTree'].getCheckedNodes(true);
        if (processList.length === 0) {
          this.$alert('请选择要设置的工序', '信息');
          return;
        }

        processList = _.map(processList, function (processObj) {
          return {
            workshopName: processObj.workshopId,
            processName: processObj.id
          };
        });

        var procedure = this.procedure;
        this.loading = true;
        var self = this;
        ajaxRequest('orderProcedureTemplate/addUserProcedure', {
          id: procedure.id,
          procedureArray: JSON.stringify(processList)
        }).then(function () {
          self.$alert('用户工序设置成功', '信息', {
            callback: function () {
              self.$emit('setting-success', processList);
            }
          });
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      }
    },

    template: template
  };
}();
